<template>
	<view class="mark" :class="[show_key ? '' : 'hidden']" >
		<view class="kong"></view>
		<!-- 信息框 -->
		<view class="msg">
			<!-- 关闭按钮 -->
			<view class="img" @tap="closeFuc">
				X
			</view>
			<view class="title">
				{{i18n.cash.inputpass}}
			</view>
			<view class="subTitle" v-show="show_subTitle">
				 {{price}}
			</view>
			<view class="pswBox">
				<view v-for="(item,index) in 6" :key="index" class="content_item">{{password[index] ? '●' : ''}}</view>
			</view>
			<!-- <view class="forget" @tap="forgetFuc">找回密码</view> -->
		</view>
		<!-- 数字键盘 -->
		<view class="numeric">
			<!-- <view class="num" v-for="item in 12" :key="item" :class="item == 9 ? 'amend1' : item == 11 ? 'amend3 iconfont icon-backspace' : ''" @tap="press({num:item+1})">
				{{item == 9 ? '' : item == 10 ? item - 10 : item == 11 ? '': item+1}}
			</view> -->
			<view class="num" v-for="item in num" :key="item" :class="item == 10 ? 'amend1' : item == 12 ? 'amend3 iconfont icon-backspace' : ''" @tap="press({num:item})">
				{{item == 10 ? '' : item == 11 ? '0' : item == 12 ? '←': item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show_key:Boolean,
			price:String,
			show_subTitle:{
				default:true
			},
		},
		data () {
			return { 
				num:[1,2,3,4,5,6,7,8,9,10,11,12],
				password:"",
			}
		},
		computed: { 
			i18n() {
				return this.$t('message');
			}
		},
		created() {
			console.log(this.key_words);
		},
		methods:{
			press (obj) {
				// console.log(obj);
				let num = obj.num
				if (obj.num == 10) {
					console.log('我是10我什么都不干')
				} else if (obj.num == 12) {
					this.password = this.password.slice(0,this.password.length-1);
				} else if (obj.num == 11) {
					num = '0'
					this.password += num;
				} else {
					this.password += num;
				}
				// console.log(this.password);
				if (this.password.length == 6) {
					this.$emit('getPassword',{password:this.password})
					this.password = "";
					// uni.showModal({
					// 	title:'密码',
					// 	content:this.password,
					// 	success: () => {
					// 		this.password = "";
					// 	}
					// })
				}
			},
			// 关闭支付页面
			closeFuc () {
				console.log('关闭支付页面');
				this.$emit("closeFuc",false)
			},
			// 找回密码
			forgetFuc () {
				uni.navigateTo({
					url:'/pages/mine/myWallet/changezfPwd/changezfPwd'
				})
			}
		}
	}
</script>

<style>
	.mark{
		width: 750upx;
		background: rgba(0,0,0,0.7);
		padding: 0 0 500upx 0;
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 99;
	}
	.hidden{
		display: none;
	}
	.kong{
		width: 750upx;
		height: 250upx;
	}
	.msg{
		width: 550upx;
		height: 450upx;
		background:#fffffe;
		border-radius: 20upx;
		margin: 0 auto;
		animation: msgBox .2s linear;
	}
	@keyframes msgBox{
		0%{
			transform:translateY(50%);
			opacity: 0;
		}
		50%{
			transform:translateY(25%);
			opacity: 0.5;
		}
		100%{
			transform:translateY(0%);
			opacity: 1;
		}
	}
	@keyframes numBox{
		0%{
			transform:translateY(50%);
			opacity: 0;
		}
		50%{
			transform:translateY(25%);
			opacity: 0.5;
		}
		100%{
			transform:translateY(0%);
			opacity: 1;
		}
	}
	.msg>.img{
		padding: 20upx 0 0 20upx;
		font-size: 40upx;
		text-align: right;
		margin-right: 20px;
	}
	.msg>.title{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-weight: 500;
		font-size: 36upx;
		text-align: center;
	}
	.msg>.subTitle{
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		font-weight: 400;
		font-size: 32upx;
		text-align: center;
	}
	.pswBox{
		width: 80%;
		height: 80upx;
		margin: 50upx auto 0;
		display: flex;
	}
	.content_item{
		flex: 2;
		text-align: center;
		line-height: 80upx;
		border: 1upx solid #444850;
		border-right: 0upx solid;
	}
	.content_item:nth-child(1){
		border-radius: 10upx 0 0 10upx;
	}
	.content_item:nth-child(6){
		border-right: 1upx solid #444850;
		border-radius: 0 10upx 10upx 0;
	}
	.numeric{
		width: 750upx;
		height: 470upx;
		border: 1upx solid #444850;
		position: fixed;
		z-index: 98;
		bottom: 0upx;
		background-color:#fffffe;
		animation: msgBox .2s linear;
	}
	.num{
		width: 225upx;
		height: 90upx;
		font-size: 42upx;
		font-weight: 500;
		line-height: 90upx;
		text-align: center;
		vertical-align: middle;
		margin: 12upx 12upx 0 12upx;
		display: inline-block;
		border: 1upx solid #444850;
		border-radius: 10upx;
		background-color:#fffffe;
		position: relative;
		z-index: 99;
	}
	.forget{
		font-size: 28upx;
		font-weight: 500;
		color: #767676;
		text-align: center;
		line-height: 80upx;
	}
	.amend1{
		border: 1upx solid#fffffe;
		background-color:#fffffe;
	}
	.amend3{
		font-size: 60upx;
		border: 1upx solid#fffffe;
		background-color:#fffffe;
	} 
	
</style>